/*
* @Author: karry
* @Date:   2019-08-01 11:57:19
* @Last Modified by:   karry
* @Last Modified time: 2019-08-01 11:57:19
*/

import React 	 from 'react';
import { Link }  from 'react-router-dom';
import PageTitle from 'component/page-title/index.jsx';
import MUtil 	from 'util/db.jsx';
import Statistic 	from 'service/statistic-service.jsx'

const _db 		 = new MUtil();
const _statistic = new Statistic();

import './index.scss';

class Home extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			userCount 	 : '-',
			productCount : '-',
			orderCount 	 : '-'
		}
	}
	componentDidMount(){
		this.loadCount();
	}
	loadCount(){
		_statistic.getHomeCount().then(res => {
			this.setState(res);
		}, errMsg => {
			_db.errorTips(errMsg);
		});
	}
	render(){
		return (
			<div id="page-wrapper">
				<PageTitle title="首页" />
				<div>
					<div className="col-md-4 countent-box">
						<Link to="/user" className="color-box brown">
							<div className="card horizontal cardIcon waves-effect waves-dark">
								<div className="card-image">
									<i className="fa fa-users fa-5x"></i>
								</div>
								<div className="card-stacked">
									<div className="card-content">
										<h3>{this.state.userCount}</h3> 
									</div>
									<div className="card-action">
										<strong>用 户 总 数</strong>
									</div>
								</div>
							</div>
						</Link>
                    </div>
                    <div className="col-md-4 countent-box">
						<Link to="/product" className="color-box green">
							<div className="card horizontal cardIcon waves-effect waves-dark">
								<div className="card-image">
									<i className="fa fa-shopping-cart fa-5x"></i>
								</div>
								<div className="card-stacked">
									<div className="card-content">
										<h3>{this.state.productCount}</h3> 
									</div>
									<div className="card-action">
										<strong>商 品 总 数</strong>
									</div>
								</div>
							</div>
						</Link>
                    </div>
                    <div className="col-md-4 countent-box">
						<Link to="/order" className="color-box blue">
							<div className="card horizontal cardIcon waves-effect waves-dark">
								<div className="card-image">
									<i className="fa fa-list-alt fa-5x"></i>
								</div>
								<div className="card-stacked">
									<div className="card-content">
										<h3>{this.state.orderCount}</h3> 
									</div>
									<div className="card-action">
										<strong>订 单 总 数</strong>
									</div>
								</div>
							</div>
						</Link>
                    </div>
				</div>
			</div>
		);
	}
}

export default Home;